<template>
  <div class="container">
    <div class="mainContainer">
      <div v-if="problemNowList.length > 0 || problemYerList.length > 0">
        <div class="modelArea todayMsg">
          <div class="titleArea">
            <div class="date">今天</div>
            <div class="total">{{ problemNowList.length }}个提问</div>
          </div>
          <div class="questionList">
            <div v-for="(item, index) of problemNowList" :key="index" class="singleQuestion" @click="handleIntoDetail(item.id)">
              <img v-if="item.avatar" class="leftAvatar" :src="item.avatar" alt="">
              <img v-else class="leftAvatar" src="/static/images/defaultAvatar.png" alt="">
              <div class="rightContent">
                <div class="topTitle">{{ item.content }}</div>
                <div class="bottomArea">
                  <div class="type">{{ item.type }}</div>
                  <div class="time">{{ item.createTime }}</div>
                  <div v-show="item.memberReply" class="isReply">已回复</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modelArea beforeToday" v-show="problemYerList.length > 0">
          <div class="titleArea">
            <div class="date">昨天</div>
          </div>
          <div class="questionList">
            <div v-for="(item, index) of problemYerList" :key="index" class="singleQuestion" @click="handleIntoDetail(item.id)">
              <img v-if="item.avatar" class="leftAvatar" :src="item.avatar" alt="">
              <img v-else class="leftAvatar" src="/static/images/defaultAvatar.png" alt="">
              <div class="rightContent">
                <div class="topTitle">{{ item.content }}</div>
                <div class="bottomArea">
                  <div class="type">{{ item.type }}</div>
                  <div class="time">{{ item.createTime }}</div>
                  <div v-show="item.memberReply" class="isReply">已回复</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="noData">暂无数据~~</div>
    </div>
  </div>  
</template>

<script>
export default {
  data () {
    return {
      problemParams: {
        pageNo: 1,
        pageSize: 10
      },
      totalPage: 1,
      problemNowList: [],
      problemYerList: []
    }
  },
  onLoad () {
    this.problemNowList = []
    this.problemYerList = []
    this.problemParams = {
      pageNo: 1,
      pageSize: 10
    }
  },
  mounted () {
    this.getProblems()
  },
  onReachBottom () {
    if (this.problemParams.pageNo < this.totalPage) {
      this.problemParams.pageNo = this.problemParams.pageNo + 1
      this.getProblems()
    } else {
      wx.showToast({
        title: '数据加载完了..',
        icon: 'none'
      })
    }
  },
  methods: {
    getCurrentDate (data) {
      var myDate = data ? new Date(data) : new Date()
      var year = myDate.getFullYear()
      var month = myDate.getMonth() + 1
      month = month < 10 ? ('0' + month) : month
      var day = myDate.getDate()
      day = day < 10 ? ('0' + day) : day
      // var days = myDate.getDay()
      var str = year + '-' + month + '-' + day
      return str
    },
    getProblems () {
      this.$httpWX.post({
        url: '/academy/teacher/myQuestion',
        data: this.problemParams,
        header: {
          'content-type': 'application/json', // 默认值
          'accessToken': wx.getStorageSync('tokens')
        }
      }).then(res => {
        console.log('res: ', res)
        let nowtime = this.getCurrentDate()
        const res1 = res.data.list.filter((its) => {
          return its.createTime.indexOf(nowtime) > -1
        })
        const res2 = res.data.list.filter((it) => {
          return it.createTime.indexOf(nowtime) === -1
        })

        this.problemNowList = this.problemNowList.concat(res1)
        this.problemYerList = this.problemYerList.concat(res2)
        this.totalPage = Math.ceil(res.data.total / this.problemParams.pageSize)
      })
    },
    handleIntoDetail (id) {
      wx.navigateTo({ url: '../myQuestionDetail/main?id=' + id })
    }
  }
}
</script>

<style lang="less" scoped>
  .mainContainer {
    padding: 0 30rpx;
    .modelArea {
      .titleArea {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 35rpx;
        .date {
          color: #000;
          font-size: 30rpx;
          font-weight: bold;
        }
        .total {
          color: #999;
          font-size: 26rpx;
          font-weight: bold;
        }
      }
      .questionList {
        .singleQuestion {
          border: 1rpx solid #E5E5E5;
          border-radius: 10rpx;
          padding: 0 70rpx 0 18rpx;
          margin-bottom: 24rpx;
          width: 100%;
          height: 150rpx;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          box-sizing: border-box;
          .leftAvatar {
            width: 90rpx;
            height: 90rpx;
            margin-right: 42rpx;
          }
          .rightContent {
            .topTitle {
              color: #171717;
              font-size: 28rpx;
              font-weight: bold;
              margin: 13rpx 0 27rpx;
              width: 470rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            .bottomArea {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              .type, .time {
                color: #999;
                font-size: 22rpx;
                margin-right: 16rpx;
                line-height: 20rpx;
              }
              .isReply {
                line-height: 20rpx;
                color: #FFAD0D;
                font-size: 22rpx;
                font-weight: bold;
              }
              .time::before, .isReply::before {
                content: '|';
                display: inline-block;
                color: #DCDCDC;
                width: 1rpx;
                height: 15rpx;
                margin-right: 15rpx;
              }
            }
          }
        }
      }
    }
    .beforeToday {
      margin-top: 28rpx;
      .questionList .singleQuestion {
        .rightContent .topTitle {
          color: #999;
        }
      }
    }
    .noData {
      color: #999999;
      font-size: 30rpx;
      text-align: center;
    }
  }
</style>
